<template>
  <!--  控制台 -->
  <base-breadcrumb :title="$route.meta.title">
    <div id="float-iframe" class="video">
      <BaseIframe src="/dist/#/index/MoProject" />
      <!-- <a-button
        v-if="isFullScreen"
        id="full-btn"
        class="mb12 right"
        icon="fullscreen"
        @click="fullScreen"
      >
        全屏
      </a-button> -->
    </div>
  </base-breadcrumb>
</template>

<script>
import BaseIframe from '@/components/BaseIframe'

export default {
  components: {
    BaseIframe
  },
  data() {
    return {
      isFullScreen: true
    }
  },
  created() {
    //监听各浏览器fullscreenchange 事件处理
    document.addEventListener('fullscreenchange', () => {
      this.isFullScreen = true
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.isFullScreen = true
    })
    document.addEventListener('webkitfullscreenchange', () => {
      console.log('111')
      this.isFullScreen = true
    })
    document.addEventListener('msfullscreenchange', () => {
      this.isFullScreen = true
    })
  },
  mounted() {},
  methods: {
    fullScreen() {
      let floatFrame = document.getElementById('float-iframe')

      this.requestFullScreen(floatFrame)
    },
    //进入全屏
    requestFullScreen(element) {
      let de = element

      if (de.requestFullscreen) {
        de.requestFullscreen()
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen()
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen()
      }
      let that = this
      setTimeout(function () {
        that.isFullScreen = false
      }, 50)
    }
  }
}
</script>
<style lang="less" scoped>
.video {
  position: relative;
  width: 100%;
  height: 800px;
  .right {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>
